<template>
	<view>
		<view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
			<u-search placeholder="请输入作业单号或作业内容搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
		</view>
		<u-card padding="16" v-for="item in dataList" :key="item.id">
			<view class="" slot="head">
				<view class="wrap">
					<u-row>
						<u-col span="10">
							<view class="title">
								<span>作业内容：</span><span>{{item.name}}</span>
							</view>
						</u-col>
						<u-col span="2" text-align="right" v-if="item.status == '未开始' || item.status == '作业中'">
							<view @click="showCode(item)">
								<u-icon name="scan"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="" slot="body" @click="toDetailed(item.id)">
				<view class="wrap">
					<u-row>
						<u-col span="6">
							<view class="u-line-1 u-m-t-10 weikaishi" v-if="item.status == '未开始'">
								<span>状态：</span><span>{{item.status}}</span>
							</view>
							<view class="u-line-1 u-m-t-10 jinxingzhong" v-else-if="item.status == '作业中'">
								<span>状态：</span><span>{{item.status}}</span>
							</view>
							<view class="u-line-1 u-m-t-10 yizuofei" v-else-if="item.status == '作废'">
								<span>状态：</span><span>{{item.status}}</span>
							</view>
							<view class="u-line-1 u-m-t-10 yiwancheng" v-else>
								<span>状态：</span><span>{{item.status}}</span><span v-if="item.v10">-{{item.v10}}</span>
							</view>
						</u-col>
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>作业日期：</span><span>{{item.v1}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>客户：</span><span>{{item.outCustomerName}}</span>
							</view>
						</u-col>
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>项目部：</span><span>{{item.operateName}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>单号：</span><span>{{item.orderNumber}}</span>
							</view>
						</u-col>
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>客户单号：</span><span>{{item.customerNumber}}</span>
							</view>
						</u-col>
						
					</u-row>
					<u-row >
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>类型：</span><span>{{item.taskWork}}</span>
							</view>
						</u-col>
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>类别：</span><span>{{item.v8}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>车型：</span><span>{{item.carModel}}</span>
							</view>
						</u-col>
						<u-col span="6" v-if="item.taskWork == '跟车'">
							<view class="u-line-1 u-m-t-10">
								<span>门店数：</span><span>{{item.v9}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>实时人数：</span><span>{{item.v6}}</span>
							</view>
						</u-col>
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>累计人数：</span><span>{{item.peoples}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>核算方式：</span><span>{{item.settlementMode}}</span>
							</view>
						</u-col>
						<u-col span="6" v-if="item.settlementMode == '体积'">
							<view class="u-line-1 u-m-t-10">
								<span>体积：</span><span>{{item.volume}}</span>
							</view>
						</u-col>
						<u-col span="6" v-if="item.settlementMode == '数量'">
							<view class="u-line-1 u-m-t-10">
								<span>数量：</span><span>{{item.nums}}</span>
							</view>
						</u-col>
						<u-col span="6" v-if="item.settlementMode == '重量'">
							<view class="u-line-1 u-m-t-10">
								<span>重量(吨)：</span><span>{{item.weights}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>时效：</span><span>{{item.prescription}}</span>
							</view>
						</u-col>
						<u-col span="6" >
							<view class="u-line-1 u-m-t-10">
								<span>累计工时：</span><span>{{item.hours}}</span>
							</view>
						</u-col>
					</u-row>
					<u-row >
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>开始时间：</span><span v-if="item.createTimes">{{item.createTimes.substring(5, 16)}}</span>
							</view>
						</u-col>
						<u-col span="6">
							<view class="u-line-1 u-m-t-10">
								<span>结束时间：</span><span v-if="item.endTime">{{item.endTime.substring(5, 16)}}</span>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="foot-butten" slot="foot" v-if="item.status == '未开始' || item.status == '作业中'">
				<view :class="flex">
					<u-col span="2" text-align="center" >
						<view class="u-m-10 u-border-right" @click="getInvalid(item.id)">
							作废
						</view>
					</u-col>
					<u-col span="3" text-align="center" @click="editTask(item)" >
						<view  class="u-m-10 u-border-right">
							修改{{item.settlementMode}}
						</view>
					</u-col>
					<u-col span="4" text-align="center" @click="showCode(item)" >
						<view  class="u-m-10 u-border-right">
							出示二维码
						</view>
					</u-col>
					<u-col span="3" text-align="center" @click="complete(item)" >
						<view  class="u-m-10 ">
							完成作业
						</view>
					</u-col>
				</view>
			</view>
			<view class="foot-butten" slot="foot" v-if="item.status == '已完成' && item.v1.substring(0, 7) == newTime && item.taskWork != '装车'">
				<view :class="flex">
					<u-col span="6" text-align="center" @click="editTaskYwc(item)" >
						<view  class="u-m-10  u-border-right">
							修改{{item.settlementMode}}
						</view>
					</u-col>
					<u-col span="6" text-align="center" @click="taskCard(item)" >
						<view  class="u-m-10">
							服务卡
						</view>
					</u-col>
				</view>
			</view>
			<view class="foot-butten" slot="foot" v-if="item.status == '已完成' && item.taskWork == '装车'">
				<view :class="flex">
					<u-col span="4" text-align="center" @click="editTaskYwc(item)" v-if="item.v10 != '已拆'">
						<view  class="u-m-10  u-border-right">
							修改{{item.settlementMode}}
						</view>
					</u-col>
					<u-col span="4" text-align="center" @click="chaimingxi(item.id)" v-if="item.v10 != '已拆'">
						<view  class="u-m-10  u-border-right">
							拆明细
						</view>
					</u-col>
					<u-col span="4" text-align="center" @click="taskCard(item)" >
						<view  class="u-m-10">
							服务卡
						</view>
					</u-col>
				</view>
			</view>
			<view class="foot-butten" slot="foot" v-if="item.status == '已完成' && item.v1.substring(0, 7) != newTime">
				<view :class="flex">
					<u-col span="12" text-align="center" @click="taskCard(item)" >
						<view  class="u-m-10">
							服务卡
						</view>
					</u-col>
				</view>
			</view>
		</u-card>
		<u-popup v-model="popupShow" mode="center" closeable width="500rpx" height="300rpx" border-radius="10">
			<view class="u-text-center u-m-t-20" v-html="taskInfo.settlementMode"></view>
			<view class=" u-m-20">
				<u-input v-model="nums" type="digit" border="true"  placeholder="请输入数值" />
			</view>
			<view  style="height: 80rpx">
				<view class="close-btn u-m-t-40">
					<u-button size="medium" @click="define()">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow4" mode="center" closeable width="500rpx" height="300rpx" border-radius="10">
			<view class="u-text-center u-m-t-20" v-html="taskInfo.settlementMode"></view>
			<view class=" u-m-20">
				<u-input v-model="nums4" type="digit" border="true"  placeholder="请输入数值" />
			</view>
			<view  style="height: 80rpx">
				<view class="close-btn u-m-t-40">
					<u-button size="medium" @click="define2()">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow2" mode="center" closeable width="650rpx" height="840rpx" border-radius="10">
			<view class="container page">
			  <view class="panel">
				<view class="header" @click="hello">请扫描以下任意二维码或条形码</view>
				<view class="barcode">
				  <canvas canvas-id="barcode" id="barcode" v-if="showCan"/>
				  <view class="barnum">{{taskInfo.name}}</view>
				</view>
				<view class="qrcode">
				  <canvas canvas-id="qrcode" id="qrcode" v-if="showCan"/>
				</view>
			  </view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow3" mode="center" closeable width="650rpx" height="840rpx" border-radius="10">
			<view class="container page">
			  <view class="panel">
				<view class="header">请扫描二维码</view>
				<view class="barcode">
				  <view class="barnum">{{taskInfo.name}}</view>
				</view>
				<view class="qrcode">
				  <view>
				      <tki-qrcode
				      ref="qrcode"
				      cid="qrcode111"
				      :val="val"
				      :size="size"
				      unit="upx"
				      :loadMake="loadMake"
					  :onval="onval"
					  :showLoading="showLoading"/>
				  </view>
				</view>
			  </view>
			</view>
		</u-popup>
		<u-popup v-model="popupShow5" mode="center" closeable width="500rpx" height="300rpx" border-radius="10">
			<view class="u-text-center u-m-t-20">作业时间已隔天，请确认结束时间</view>
			<view class=" u-m-20">
				<u-input v-model="endTime" type="select" @click="getT()"/>
			</view>
			<view  style="height: 80rpx">
				<view class="close-btn u-m-t-40">
					<u-button size="medium" @click="define3()">确定</u-button>
				</view>
			</view>
		</u-popup>
		<view>
			<u-picker mode="time" v-model="show" :default-time="endTime" :params="params" @confirm="confirm"></u-picker>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	import CODE  from '@uni-plugs/uni-code'
	import tkiQrcode from '@/node_modules/tki-qrcode/components/tki-qrcode/tki-qrcode.vue'
	export default {
		data() {
			return {
				dataList: [],
				keyword:'',
			    pageNo: 1,
			    hasMore: true,
			    orderCount: 0,
				taskInfo: {},
				popupShow:false,
				popupShow2:false,
				popupShow3:false,
				popupShow4:false,
				popupShow5:false,
				show:false,
				nums:'',
				nums4:'',
				showCan: true,
				val:'-400',
				size:620,
				loadMake: true, // 组件加载完成后自动生成二维码
				onval:true,
				showLoading:false,
				flex:'',
				newTime:'',
				
				taskId:'',
				endTime:'',
				
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
			}
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			let date = new Date()
			let year = date.getFullYear();//年
			let month = date.getMonth() + 1;//注意！月份是从0月开始获取的，所以要+1;
			this.newTime =  year + '-' + (month >= 10 ? month : '0' + month)
		},
		onShow() {
			this.refresh()
		},
		onPullDownRefresh() {
			this.refresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			uni.showLoading({
				title: '加载中'
			})
			if (this.hasMore) {
				this.pageNo++ 
				setTimeout(() => {
					this.loadOrder({
						condition: this.keyword
					}).then(res => {})
					uni.hideLoading()
				}, 500)
			} else {
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '已经到低了哦',
						duration: 2000
					});
				}, 500)
			}
		},
		methods: {
			define3(){
				this.$http.post('/rest/task/complete',{
				},{
					params: {
						id: this.taskId,
						endTime:this.endTime
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					if(res.data.code == 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						this.popupShow5 = false
						setTimeout(() => {
							this.refresh()
						}, 600)
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
						setTimeout(() => {
							this.refresh()
						}, 600)
					}
				})
			},
			confirm(e) {
				this.endTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			getT(){
				this.show = true
			},
			complete(e){//完成作业
				if(e.status == '作业中'){
					// let year = new Date().getFullYear();//年
					// let month = new Date().getMonth() + 1;//注意！月份是从0月开始获取的，所以要+1;
					// let day = new Date().getDate();//日
					// let currentDate =  year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day);
					// let createTimes = e.createTimes
					// if(currentDate != createTimes){
					// 	let date = new Date()
					// 	let year = date.getFullYear();//年
					// 	let month = date.getMonth() + 1;//注意！月份是从0月开始获取的，所以要+1;
					// 	let day = date.getDate();//日
					// 	let h = date.getHours();//小时
					// 	let m = date.getMinutes();//分钟
					// 	let s = date.getSeconds();//秒
					// 	this.endTime = year + '-' + (month >= 10 ? month : '0' + month) + '-' + (day >= 10 ? day : '0' + day) + ' ' + (h >= 10 ? h : '0' + h) + ':' + (m >= 10 ? m : '0' + m) + ':' + (s >= 10 ? s : '0' + s)
					// 	this.taskId = e.id
					// 	this.popupShow5 = true
					// } else {
						uni.showModal({
							content: '确定完成作业吗？',
							success: (res) => {
								if (res.confirm) {
									this.$http.post('/rest/task/complete',{
									},{
										params: {id: e.id},
										header: {
											'Authorization' :uni.getStorageSync('token'),
										}
									}).then(res => {
										if(res.data.code == 200) {
											this.$refs.uToast.show({
												title: '操作成功',
												type: 'success'
											})
											setTimeout(() => {
												this.refresh()
											}, 600)
										} else {
											this.$refs.uToast.show({
												title: res.data.message,
												type: 'error'
											})
											setTimeout(() => {
												this.refresh()
											}, 600)
										}
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
					// }
				} else {
					uni.showToast({
						title: "该作业单不在作业中",
						icon: 'none'
					})
				}
			},
			chaimingxi(id){
				this.$Router.push({ 
					name: 'chaimingxi',
					params: { taskid:id },
				})
			},
			toDetailed(e){
				this.$Router.push({ 
					name: 'taskdetailed',
					params: { taskid:e },
				})
			},
			showCode(item){
				//#ifdef H5 || APP-PLUS
				this.popupShow3 = true
				this.val = 'qrcode-56it-'+item.id
				//#endif
				//#ifdef MP-WEIXIN
				this.popupShow2 = true
				this.taskInfo = item
				this.findCan()
				//#endif
			},
			findCan() {
				//条形码
				CODE.BarCode({
					id: 'barcode',// canvas 的canvas-id
					code:  'barcode-56it-'+this.taskInfo.id,// 生成条形码的字符串
					color: '#000',// 条形码的颜色
					bgColor: '#FFFFFF',// 背景色
					width: 300,// 宽度
					height: 100// 高度
				});
				CODE.QRCode({
					id: 'qrcode',// canvas的canvas-id
					code: 'qrcode-56it-'+this.taskInfo.id,//生成二维码的字符串
					size: 210,// 二维码大小
					level: 4,//等级 0～4
					border:{
						color: ['#e66465','#9198e5'],//边框颜色支持渐变色
						lineWidth: 4,//边框宽度
					},
					// img: require('@/static/zslogo02.png'),//图片
					// iconSize: 40,//二维码图标的大小
					color: '#000'// 二维码颜色 默认黑色
				});
			},
			async hello(){//点击显示隐藏
				// this.showCan = !this.showCan
				// if(this.showCan){
				// 	this.$nextTick(()=>{
				// 		this.findCan()
				// 	})
				// }
				// const res = await CODE.SaveCode('qrcode',210,210) // 保存二维码图片
				// console.log(res)
			},
			refresh(){
				this.pageNo = 1
				this.hasMore = true
				this.loadOrder({
					condition: this.keyword
				}).then(res => {
				})
			},
			loadOrder(param = {}) {
				return new Promise((resolve, reject) => {
					param = Object.assign(param, {
						page: this.pageNo,
						limit: 10
					})
					this.$http.post('/rest/task/list',{
					},{
						params: param,
						header: {
							'Authorization' :uni.getStorageSync('token'),
						}
					}).then(res => {
						if (this.pageNo == 1) {
							this.dataList = res.data.data
						} else {
							this.dataList = this.dataList.concat(res.data.data)
						}
						this.orderCount = res.data.count
						this.hasMore = this.pageNo * 10 < res.data.count
						resolve(res)
					})
				})
			},
			editTask(item) {
				if(item.settlementMode == '工时'){
					uni.showToast({
						title: "工时不可修改",
						icon: 'none'
					})
					return
				}
				this.popupShow = true
				this.taskInfo = item
				if(item.settlementMode == '体积'){
					this.nums = item.volume
				}
				if(item.settlementMode == '数量'){
					this.nums = item.nums
				}
				if(item.settlementMode == '重量'){
					this.nums = item.weights
				}
			},
			editTaskYwc(item){
				if(item.settlementMode == '工时'){
					uni.showToast({
						title: "工时不可修改",
						icon: 'none'
					})
					return
				}
				this.popupShow4 = true
				this.taskInfo = item
				if(item.settlementMode == '体积'){
					this.nums4 = item.volume
				}
				if(item.settlementMode == '数量'){
					this.nums4 = item.nums
				}
				if(item.settlementMode == '重量'){
					this.nums4 = item.weights
				}
			},
			taskCard(e){
				this.$Router.push({ 
					name: 'taskCard',
					params: { taskid:e.id },
				})
			},
			define(){
				if(typeof this.nums == 'undefined' || this.nums == null || this.nums == ""){
					uni.showToast({
						title: "请输入数值",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在提交'
				})
				this.$http.post('/rest/task/editTask',{
				},{
					params:{
						id: this.taskInfo.id,
						nums: this.nums
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if(res.data.code == 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						setTimeout(() => {
							this.refresh()
						}, 1000)
						this.popupShow = false
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
						setTimeout(() => {
							this.refresh()
						}, 1000)
					}
				})
			},
			define2(){
				if(typeof this.nums4 == 'undefined' || this.nums4 == null || this.nums4 == ""){
					uni.showToast({
						title: "请输入数值",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在提交'
				})
				this.$http.post('/rest/task/editTaskYwc',{
				},{
					params:{
						id: this.taskInfo.id,
						nums: this.nums4
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					uni.hideLoading()
					if(res.data.code == 200) {
						this.$refs.uToast.show({
							title: '操作成功',
							type: 'success'
						})
						setTimeout(() => {
							this.refresh()
						}, 1000)
						this.popupShow4 = false
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
						setTimeout(() => {
							this.refresh()
						}, 1000)
					}
				})
			},
			startTask(e){//开始作业
				uni.showModal({
					content: '确定开始作业吗？',
					success: (res) => {
						if (res.confirm) {
							this.$http.post('/rest/task/startTask',{
							},{
								params: {id: e},
								header: {
									'Authorization' :uni.getStorageSync('token'),
								}
							}).then(res => {
								if(res.data.code == 200) {
									this.$refs.uToast.show({
										title: '操作成功',
										type: 'success'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getInvalid(e){//作废
				uni.showModal({
					content: '确定作废吗？',
					success: (res) => {
						if (res.confirm) {
							this.$http.post('/rest/task/invalid',{
							},{
								params: {id: e},
								header: {
									'Authorization' :uni.getStorageSync('token'),
								}
							}).then(res => {
								if(res.data.code == 200) {
									this.$refs.uToast.show({
										title: '作废成功',
										type: 'success'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								} else {
									this.$refs.uToast.show({
										title: res.data.message,
										type: 'error'
									})
									setTimeout(() => {
										this.refresh()
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			search(e){
				uni.showLoading({
					title: '加载中'
				})
				this.refresh()
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			},
		},
		components: {
			tkiQrcode
		},
	}
</script>
<style lang="scss">
	//二维码
	.page {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	}
	
	.container {
	    padding-bottom: 10rpx;
	    background-color: #ffffff;
	}
	
	.panel {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: stretch;
	    box-sizing: border-box;
	    width: 650rpx;
	    margin-top: 20rpx;
	    border-radius: 10rpx;
	    background-color: #fff;
	}
	
	.header {
	    height: 100rpx;
	    background-color: #f0f0f0;
	    border-radius: 10rpx 10rpx 0 0;
	    text-align: center;
	    line-height: 100rpx;
	    font-weight: bold;
	    letter-spacing: 2px;
	    margin-bottom: 40rpx;
	    color: #1b82d2;
	}
	
	.barcode {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	}
	
	.barnum {
	    width: 670rpx;
	    height: 100rpx;
	    line-height: 100rpx;
	    font-size: 38rpx;
	    font-weight: bold;
	    text-align: center;
	    letter-spacing: 5rpx;
	    white-space: nowrap;
	}
	
	.barcode {
	    width: 650rpx;
	    height: 200rpx;  
	    background-color: #fff;
	}
	
	.qrcode {
	    height: 460rpx;
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-end;
	    align-items: center;
	}
	#qrcode{
	    width: 460rpx;
	    height: 460rpx;
	    background-color: #fff;
	}
	//二维码
</style>
